<script lang="ts" setup>
import { getCurrentInstance, ref } from 'vue'
import { onPageScroll, onReady } from '@dcloudio/uni-app'
import { useScrollUpdownBottomContent } from '@/hooks'
import { useSubPage } from './composables'
const {
  navBarInfo,
  userInfo,
  loginHandle,
  navUserInfoPage,
  navCommonProblemPage,
  navMemberRightsPage,
  navOrderListPage,
  navbarInitFinishHandle,
} = useSubPage()
const innerAudioContext = uni.createInnerAudioContext()
innerAudioContext.autoplay = true
// 翻译事件引入
var plugin = requirePlugin('WechatSI')
let manager = plugin.getRecordRecognitionManager()
const text = ref<string>('开始录音')
const voicePath = ref<string>('')
const shows = ref<boolean>(false)
const animation = ref<boolean>(false)
const voiceState = ref<string>('')
const endOne = ref<string>('')
const num = ref<number>(1)
const recognitionType = ref<number>(1)
const recordList = ref<Array>([
  {
    type: 1,
    origin: 'Hello，小明',
    result: 'HELLO,XIAO MING',
    filename: '123.MP3',
  },
  {
    type: 2,
    origin: '你好，小明',
    result: 'HELLO,XIAO MING',
    filename: '123.MP3',
  },
])
// 1 Chinese中文   2.English 英文
const startRecord = (type: number) => {
  recognitionType.value = type
  manager.start({
    duration: 30000,
    lang: 'zh_CN',
  })
  text.value = '松手上传'
  animation.value = true
}
const endRecord = () => {
  console.log('结束')
  text.value = '开始录音'
  animation.value = false
  shows.value = true
  manager.stop()
  setTimeout(function () {
    fanyi()
  }, 1000)
}
// 翻译成对应的版本
const fanyi = () => {
  endOne.value = voiceState.value
  if (!voiceState.value) {
    return
  }
  let lfrom = recognitionType.value == 1 ? 'zh_CN' : 'en_US'
  let lto = recognitionType.value == 1 ? 'en_US' : 'zh_CN'
  plugin.translate({
    lfrom: lfrom,
    lto: lto,
    content: voiceState.value,
    tts: true,
    success: (resTrans: any) => {
      recordList.value.push({
        type: recognitionType.value,
        origin: resTrans.origin,
        result: resTrans.result,
        filename: resTrans.filename,
      })
      setTimeout(function () {
        uni.pageScrollTo(
          {
            scrollTop: 10000, // 假设页面很长，滚动到一个很大的值，从而滚动到底部
            duration: 300, // 滚动动画时长，默认300ms
          },
          500
        )
      })
    },
  })
  // num.value = num.value + 1
}
const initRecord = () => {
  manager.onStart = function (res: any) {
    // voiceState.value = "onStart:" + res.msg + "正在录音"
  }
  //有新的识别内容返回，则会调用此事件
  manager.onRecognize = (res: any) => {
    voiceState.value = res.result
  }
  // 识别结束事件
  manager.onStop = (res: any) => {
    voicePath.value = res.tempFilePath
    voiceState.value = res.result
    if (voiceState.value == '') {
      endOne.value = '周围太安静啦~再试试~'
    }
  }

  // 识别错误事件
  manager.onError = (res) => {
    // voiceState.value = '翻译员去吃饭啦，等下再试试';
    shows.value = false
    uni.showToast({
      title: '未检测到,请重新翻译',
      icon: 'error',
      duration: 2000, //持续时间为 2秒
    })
  }
}
initRecord()
// 转化为英文
const handlePlay = (filename: string) => {
  let music = null
  music = uni.createInnerAudioContext() //创建播放器对象
  music.src = filename
  music.play() //执行播放
  music.onEnded(() => {
    //播放结束
    music = null
  })
}
const { style: authInfoScrollStyle, scrollHandle: authInfoScrollHandle } =
  useScrollUpdownBottomContent('up', 80)

onReady(() => {
  uni.pageScrollTo({
    scrollTop: 10000, // 假设页面很长，滚动到一个很大的值，从而滚动到底部
    duration: 300, // 滚动动画时长，默认300ms
  })
})
onPageScroll((e) => {})
</script>

<template>
  <TnNavbar
    fixed
    :bottom-shadow="false"
    :placeholder="false"
    title="续费"
    @init-finish="navbarInitFinishHandle"
  >
    <view class="tn-color-black">英语自由说</view>
  </TnNavbar>
  <!-- 顶部背景 -->
  <view class="top-bg" />
  <!-- 页面内容 -->
  <view class="page" :style="{ paddingTop: `${navBarInfo.height + 12}px` }">
    <scroll-view class="tn-text-justify" scroll-top="10000">
      <view class="tn-margin" v-for="(item, index) in recordList" :key="index">
        <view
          class="tn-flex tn-flex-row-between tn-flex-col-center"
          v-if="item.type == 1"
        >
          <view class="justify-content-item">
            <view class="tn-flex tn-flex-col-top tn-flex-row-left">
              <view
                class="logo-pic tn-margin-top-sm"
                style="
                  background-image: url('https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1664005699053-assets/web-upload/8645ea3a-e0a9-4422-8364-cc5ede305c9f.jpeg');
                "
              >
                <view class="logo-image"> </view>
              </view>
              <view class="tn-padding-right tn-color-black">
                <view class="tn-flex tn-flex-col-center">
                  <view
                    class="tn-margin-sm tn-padding-sm tn-orangered_bg"
                    style="max-width: 62vw; border-radius: 0 20rpx 20rpx 20rpx"
                  >
                    <view class="">{{ item.origin }}</view>
                    <view class="tn-flex mt-6" @tap="handlePlay(item.filename)">
                      <view class="mr-8">{{ item.result }}</view>
                      <TnIcon name="like-lack" />
                    </view>
                  </view>
                  <view class=""></view>
                </view>
              </view>
            </view>
          </view>
          <view class="justify-content-item"></view>
        </view>
        <view
          class="tn-flex tn-flex-row-between tn-flex-col-center"
          v-if="item.type == 2"
        >
          <view class="justify-content-item"></view>
          <view class="justify-content-item">
            <view class="tn-flex tn-flex-col-top tn-flex-row-left">
              <view class="tn-padding-left tn-color-black">
                <view class="tn-flex tn-flex-col-center">
                  <view
                    class="tn-margin-sm tn-padding-sm tn-gradient-bg__purplered tn-color-white"
                    style="max-width: 62vw; border-radius: 0 20rpx 20rpx 20rpx"
                  >
                    <view class="">{{ item.origin }}</view>
                    <view class="tn-flex mt-6" @tap="handlePlay(item.filename)">
                      <view class="mr-8">{{ item.result }}</view>
                      <TnIcon name="like-lack" />
                    </view>
                  </view>
                </view>
              </view>
              <view
                class="logo-pic tn-margin-top-sm"
                style="
                  background-image: url('https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1692940242409-assets/web-upload/fcc4eab6-b2ce-44eb-9165-c49b51f5f830.jpeg');
                "
              >
                <view class="logo-image"> </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 语音音阶动画 长按说话时的动画 -->
    <view class="prompt" v-if="animation">
      <section class="dots-container">
        <view class="dot"></view>
        <view class="dot"></view>
        <view class="dot"></view>
        <view class="dot"></view>
        <view class="dot"></view>
      </section>
      <text>录音中...</text>
    </view>
    <!-- 悬浮按钮-->
    <view class="operation-bar">
      <view class="news-bar">
        <button
          class="btn-container"
          @longpress="startRecord(1)"
          @touchend="endRecord"
        >
          <view class="btn tn-orangered_bg">
            <view class="text">点击说中文</view>
          </view>
        </button>
        <view
          class="btn-container"
          @longpress="startRecord(2)"
          @touchend="endRecord"
        >
          <view class="btn tn-gradient-bg__purplered">
            <view class="text">Speak English</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import './styles/index.scss';
</style>
<!-- 255,218,216 -->
